<template>
  <div>
    <div :id="id" style="width: 100%;" :style="{height: height + 'px'}"></div>
  </div>
</template>

<script>
// import echarts from 'echarts';

export default {
  name: "charts",
  props: {
    options: {
        type: Object,
        default(){
            return {

            }
        }
    },
    height: {
        type: Number,
        default: 150
    }
  },
  data() {
    return {
        id:'chart'+Math.random()
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
        if(process.client){
            const divDocument = document.getElementById(this.id);
            if(divDocument){
                // 基于准备好的dom，初始化echarts实例
                var myChart = this.$echarts.init(divDocument);
                // 绘制图表
                myChart.setOption(this.options);
            //   myChart.setOption({
            //     tooltip: {
            //         trigger: 'item'
            //     },
            //     legend: {
            //         top: '5%',
            //         left: 'center'
            //     },
            //     series: [
            //         {
            //         name: 'Access From',
            //         type: 'pie',
            //         radius: ['40%', '70%'],
            //         avoidLabelOverlap: true,
            //         labelLine: {
            //             lineStyle: {
            //                 color: '#235894'
            //             }
            //         },
            //         emphasis: {
            //             label: {
            //             show: true,
            //             fontSize: 40,
            //             fontWeight: 'bold'
            //             }
            //         },
            //         labelLine: {
            //             show: false
            //         },
            //         data: [
            //             { value: 0, name: '商品' },
            //             { value: 0, name: '供应商' },
            //         ]
            //         }
            //     ]
            //   });
            }
        }
    },
  },
};
</script>

<style></style>
